import React, { useState, useEffect } from 'react';
import { Row, Col, Card, Form, Input, Button, Tree, Space, Tabs, Menu, Checkbox } from 'antd';
import { PlusOutlined, CopyOutlined, EditOutlined, CreditCardOutlined, UpCircleOutlined } from '@ant-design/icons';
import { DeleteOutlined, FolderOutlined, CloudUploadOutlined, CloseCircleOutlined, DownCircleOutlined } from '@ant-design/icons';
import { FileAddOutlined, ChromeOutlined, CalendarOutlined, UnorderedListOutlined } from '@ant-design/icons';

import styles from './index.less';

const { DirectoryTree } = Tree;

const { TabPane } = Tabs;

const treeData = [{
  title: '设备驱动',
  key: '0',
  children: [{
    title: 'PLC',
    key: '0-0',
    children: [
      { title: 'ABB', key: '0-0-0', isLeaf: true },
      { title: 'BECKHOFF(德国倍福)', key: '0-0-1', isLeaf: true },
      { title: 'Delta', key: '0-0-2', isLeaf: true },
      { title: 'FATEK', key: '0-0-3', isLeaf: true }
    ],
  },
  {
    title: '变频器',
    key: '0-1',
    children: [
      { title: 'ABB', key: '0-1-0', isLeaf: true },
      { title: 'LG', key: '0-1-1', isLeaf: true },
      { title: '三肯', key: '0-1-2', isLeaf: true },
      { title: '三菱', key: '0-1-3', isLeaf: true },
    ],
  },{
    title: '智能仪表',
    key: '0-2',
    children: [
      { title: 'A&D', key: '0-2-0', isLeaf: true },
      { title: 'ABB', key: '0-2-1', isLeaf: true },
      { title: 'AGILENT', key: '0-2-2', isLeaf: true },
      { title: 'COSMO计器公司', key: '0-2-3', isLeaf: true },
    ],
  },{
    title: '智能模块',
    key: '0-3',
    children: [
      { title: 'ABB', key: '0-3-0' ,
      children: [
        { title: 'AC80', key: '0-3-0-1', isLeaf: true },
      ]
      },
      { title: 'ARK14000', key: '0-3-1'  ,
      children: [
        { title: 'ARK14013', key: '0-3-1-1', isLeaf: true },
        { title: 'ARK14017', key: '0-3-1-2', isLeaf: true },
        { title: 'ARK14018', key: '0-3-1-3', isLeaf: true },
        { title: 'ARK14021', key: '0-3-1-4', isLeaf: true },
        { title: 'ARK14052', key: '0-3-1-5', isLeaf: true },
        { title: 'ARK14060', key: '0-3-1-6', isLeaf: true },
        { title: 'ARK14080', key: '0-3-1-7', isLeaf: true },
      ]},
      { title: 'ARK24000', key: '0-3-2', isLeaf: true },
      { title: 'Adam4000', key: '0-3-3', isLeaf: true },
    ],
  },{
    title: '板卡',
    key: '0-4',
    children: [
      { title: '中泰', key: '0-4-0', isLeaf: true },
      { title: '中达', key: '0-4-1', isLeaf: true },
      { title: '众人', key: '0-4-2', isLeaf: true },
      { title: '凌华', key: '0-4-3', isLeaf: true },
    ],
  }],
}];

const definition: React.FC = () => {

  const [form] = Form.useForm();

  const [fields] = useState([
    {
      key: 1,
      fieldName: '编号及名称',
      fieldKey: 'name'
    },
    {
      key: 2,
      fieldName: '型号规格',
      fieldKey: 'typename'
    },
    {
      key: 3,
      fieldName: '额定电压',
      fieldKey: 'typename'
    },
    {
      key: 4,
      fieldName: '生产厂家',
      fieldKey: 'typename'
    },
    {
      key: 5,
      fieldName: '上线日期',
      fieldKey: 'typename'
    },
    {
      key: 6,
      fieldName: '价格',
      fieldKey: 'typename'
    },
    {
      key: 7,
      fieldName: '数量',
      fieldKey: 'typename'
    }
  ]);

  const formLayout = {
    labelCol: { span: 3 },
    wrapperCol: { span: 20 },
  };

  const onSelect = (keys: React.Key[], info: any) => {
    console.log('Trigger Select', keys, info);
  };

  const onExpand = () => {
    console.log('Trigger Expand');
  };

  return (
    <div className={styles.main}>
      <div className={styles.leftMenu}>
        <Space direction="vertical" style={{ width: '90%' }}>
          <div>区域位置</div>
          <Form
            name="normal_login"
            className="login-form"
          >
            <Form.Item
              name="username"
            >
              <Input />
            </Form.Item>
            <Form.Item
              name="password"
            >
              <Input />
            </Form.Item>

            <Row>
              <Col span={24}>
                <Space>
                  <Button type="primary" icon={<PlusOutlined />} size={'small'}>
                    新增
                  </Button>
                  <Button type="primary" icon={<CopyOutlined />} size={'small'}>
                    复制
                  </Button>
                  <Button type="primary" icon={<EditOutlined />} size={'small'}>
                    编辑
                  </Button>
                  <Button type="primary" icon={<DeleteOutlined />} size={'small'}>
                    删除
                  </Button>
                </Space>
              </Col>
            </Row>

          </Form>
          <DirectoryTree
            multiple
            defaultExpandAll={false}
            defaultExpandedKeys={['0-0']}
            onSelect={onSelect}
            onExpand={onExpand}
            treeData={treeData}
          />
        </Space>

      </div>
      <div className={styles.right}>
        <Row>
          <Space>
            <Button type="primary" icon={<CloudUploadOutlined />}>
              批量上传
            </Button>
            <Button type="primary" icon={<PlusOutlined />} >
              新增
            </Button>
            <Button type="primary" icon={<CopyOutlined />} >
              复制
            </Button>
            <Button type="primary" icon={<DeleteOutlined />} >
              删除
            </Button>
            <Button type="primary" icon={<FolderOutlined />} >
              保存
            </Button>
          </Space>
        </Row>
        <Row>
          <Tabs defaultActiveKey="1" type="card" style={{ marginTop: '10px', width: '100%', height: 700, border: '1px solid #355fb8' }}>
            <TabPane tab={<><CreditCardOutlined />&nbsp;设备信息</>} key={1} >
              <Card title={<div style={{ fontSize: '15px' }}>信息分类</div>} style={{ height: 360 }}
                extra={<Space>
                  <Button type="primary" icon={<FileAddOutlined />}>
                    新增文本
                  </Button>
                  <Button type="primary" icon={<ChromeOutlined />} >
                    新增单选
                  </Button>
                  <Button type="primary" icon={<UnorderedListOutlined />} >
                    新增列表
                  </Button>
                  <Button type="primary" icon={<CalendarOutlined />} >
                    新增日期
                  </Button>
                </Space>}
              >
                <Row gutter={16}>
                  <Col span={3}>
                    <Menu mode="inline"  defaultSelectedKeys={['1']}      >
                      <Menu.Item key="1">设备信息</Menu.Item>
                      <Menu.Item key="2">上级设备</Menu.Item>
                    </Menu>
                  </Col>
                  <Col span={21}>
                    <Form 
                    {...formLayout}
                    form={form} 
                    autoComplete="off">
                      {fields.map(field => (
                        <Form.Item label={field.fieldName} style={{ marginBottom: 0 }}>
                          <Form.Item
                            name={[field.fieldName, 'price']}
                            fieldKey={[field.fieldKey, 'price']}
                            style={{ display: 'inline-block', width: '70%' }}
                          >
                            <Input />
                          </Form.Item>
                          <Form.Item style={{ display: 'inline-block', width: 'calc(15% - 16px)', marginLeft: '16px' }}>
                          <Checkbox onChange={() => { }}>是否为必填项</Checkbox>
                          </Form.Item>
                          <Form.Item style={{ display: 'inline-block', width: 'calc(15% - 16px)', marginLeft: '16px', textAlign: 'right' }}>
                          <Space>
                          <UpCircleOutlined style={{ fontSize: '28px' }} onClick={() => { }} />
                          <DownCircleOutlined style={{ fontSize: '28px' }} onClick={() => { }} />
                          <CloseCircleOutlined style={{ fontSize: '28px' }} onClick={() => { }} />
                          </Space>
                          </Form.Item>
                        </Form.Item>
                      ))}
                    </Form>
                  </Col>
                </Row>
              </Card>
            </TabPane>
            <TabPane tab={<><CreditCardOutlined />&nbsp;巡检信息</>} key={2} >

            </TabPane>
          </Tabs>
        </Row>
      </div>
    </div>
  );
};

export default definition;